/**
 * 侧边栏菜单的点击关闭效果，菜单数据更改为从数组中循环获取
 */
import React from 'react';
import {Link ,NavLink } from 'react-router-dom';

class SideNav extends React.Component{
  constructor(props){
    super(props);
    //this.state设定了两个对象：menu数组用于存放菜单数据，open的值是boolean用于判断二级菜单的打开和关闭
    //menu数组：一级菜单设定字段有：icon，title，icon2（箭头），children(children数组用于存储二级菜单数据)，route 
    // 二级菜单设定字段有：title，route
    this.state={
        menu:[
        {
         icon :'fa-home',
         title :'首页',
         icon2:'',
         children :[],
         route:'/'
        },
        {
         icon : 'fa-shopping-bag',
         title :'商品',
         icon2: 'arrow',
         route:'/product',
         children :[
                    {
                    title: '商品管理',
                    route:'/product'
                    },
                    {
                    title: '品类管理',
                    route:'/product-category'
                    }
                 ],
         },
         {
            icon : 'fa-sitemap',
            title :'订单',
            icon2: 'arrow',
            route:'/orders',
            children :[
                       {
                       title: '订单管理',
                       route:'/orders'
                       }
                    ],
            }
      ],
      open:false
   };
}
//每次点击菜单开关，都将open值设置为与上次相反的值，达到打开和关闭子菜单的效果
  onSwitch(){
    this.setState({
        open:!this.state.open
    })
  }
//使用解构赋值获取menu和open
//使用map方法将数组中的每项值进行重构，item代表数组中的对象
//使用三元表达式判断children.length是否为0，从而判断一级菜单是否有子菜单，若有再对children进行map，将二级菜单循环出来
//需要注意：map要记得return，才会有结果，也可以这样使用：menu.map(item=>())
// 最外层包裹了<div key={item.route}></div>,使用route作为key，为map的每一项设定了一个唯一值
  render(){
      const {open} =this.state;
      const { menu = [] } = this.state; 
    return(
      <div className="navbar-default navbar-side" >
            <div className="sidebar-collapse">
                <ul className="nav">
                    {menu.map(item=>(
                       <div key={item.route}>{
                       item.children.length==0 ?
                        <li>
                            <NavLink exact activeClassName="active-menu" to={item.route} >
                                <i className={`fa ${item.icon}`}></i> 
                                <span>{item.title}</span> 
                            </NavLink>
                         </li>
                         :
                         <li className="active">
                            <Link to={item.route}>
                                <i className={`fa ${item.icon}`}></i> 
                                <span>{item.title}</span> 
                                <span className={`fa ${item.icon2}`} onClick={()=>{this.onSwitch()}}></span>
                            </Link>
                            {
                                open ?
                                <ul className="nav nav-second-level collapse in">
                                 {item.children.map(i=>(
                                    <li key={i.route}>
                                        <NavLink activeClassName="active-menu" to={i.route}>{i.title}</NavLink>
                                    </li>
                                  ))}
                                </ul> :
                                null
                            }      
                         </li>}
                       </div>
                    ))}
                </ul>
            </div>
      </div>
    )
  }
}

export default SideNav;